<template>
  <div class="container">
    <canvas style="width: 100%" id="my_canvas" class="canvas"></canvas>
  </div>
</template>

<script>
import { defineComponent } from "vue-demi";
import { WebglLine, ColorRGBA, WebglPlot } from "webgl-plot";
export default defineComponent({
  setup() {
    return {
      line: null,
      wglp: null,
    };
  },
  methods: {
    newFrame() {
      this.update();
      this.wglp.update();
      requestAnimationFrame(this.newFrame);
    },
    update() {
      const freq = 0.001;
      const amp = 0.5;
      const noise = 0.1;

      for (let i = 0; i < this.line.numPoints; i++) {
        const ySin = Math.sin(Math.PI * i * freq * Math.PI * 2);
        const yNoise = Math.random() - 0.5;
        this.line.setY(i, ySin * amp + yNoise * noise);
      }
    },
  },
  mounted() {
    // const canvas = document.getElementById("my_canvas");
    // const devicePixelRatio = window.devicePixelRatio || 1;
    // canvas.width = canvas.clientWidth * devicePixelRatio;
    // canvas.height = canvas.clientHeight * devicePixelRatio;

    // const numX = canvas.width;
    // const color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
    // const line = new WebglLine(color);
    // const wglp = new WebglPlot(canvas, numX);
    const canvas = document.getElementById("my_canvas");
    const devicePixelRatio = window.devicePixelRatio || 1;
    canvas.width = canvas.clientWidth * devicePixelRatio;
    canvas.height = canvas.clientHeight * devicePixelRatio;

    const numX = canvas.width;
    const color = new ColorRGBA(Math.random(), Math.random(), Math.random(), 1);
    const line = new WebglLine(color, numX);
    const wglp = new WebglPlot(canvas);

    line.arrangeX();
    wglp.addLine(line);

    this.line = line;
    this.wglp = wglp;
    // line.lineSpaceX(-1, 2 / numX);
    // wglp.addLine(line);

    requestAnimationFrame(this.newFrame);
  },
});
</script>

<style>
.container {
  width: 400px;
  height: 400px;
  background-color: rgb(0.1, 0.1, 0.1);
  color: white;
  font-family: Arial, Helvetica, sans-serif;
}

.canvas {
  width: 100%;
  height: 70vh;
}
</style>